<script setup lang="ts">
  const emits = defineEmits(['back']);
  const props = withDefaults(
    defineProps<{
      navName?: string;
    }>(),
    {
      navName: '返回列表',
    }
  );
</script>

<template>
  <div class="inner-page">
    <div class="inner-page-nav flex" style="font-size: 16px; user-select: none">
      <span
        style="cursor: pointer; color: var(--color-text-1)"
        class="flex-vcenter"
        @click="emits('back')"
      >
        <icon-left size="18" />
        <span style="margin-left: 2px">{{ props.navName }}</span>
      </span>
      <span style="flex: 1"></span>
    </div>
    <slot></slot>
  </div>
</template>

<style lang="less" scoped>
  .inner-page {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    background-color: var(--color-bg-2);
    padding: 20px;
  }
</style>
